<script setup lang="ts">
import {userStorei} from "@/stores/user_store";
import {type FileItem, Message} from "@arco-design/web-vue";
import type { baseResponse} from "@/api";

const store = userStorei()

interface Props {
  modelValue: string
  label?: string
}

const props = defineProps<Props>()
const emits = defineEmits(["update:modelValue"])

function fileSuccess(fileItem: FileItem) {
  const res = fileItem.response as baseResponse<string>
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Message.success("上传成功")
  emits("update:modelValue", res.data)
}

function input(val: string) {
  emits("update:modelValue", val)
}

</script>

<template>
  <div class="f_file_input">
    <a-input :model-value="props.modelValue" @input="input"
             :placeholder="props.label"></a-input>
    <a-upload
        :show-file-list="false"
        action="/api/file"
        name="file"
        :headers="{token: store.userInfo.token}"
        @success="fileSuccess"
    >
    </a-upload>
  </div>
</template>

<style lang="less">
.f_file_input {
  width: 100%;
  display: flex;
  .arco-upload{
    margin-left: 10px;
  }
}
</style>